<template>
	<view class="wxnearby">
		<u-navbar title="附近的人" :border-bottom="false" title-color="#000">
			<template v-slot:right>
				<view style="padding-right: 30rpx;">
					<u-icon name="more-dot-fill" size="36"></u-icon>
				</view>
			</template>
		</u-navbar>
		<view class="wxnearby-item" v-for="(v, i) in list" :key="i" @click="goAddfriend(v)">
			<view class="person-wx-user">
				<image class="person-wx-avatar" :src="v.portrait" mode="aspectFill"></image>
				<view class="wxnearby-item-content">
					<view class="person-wx-user-detail">
						<view class="person-wx-nikename">
							<text class="text">{{ v.nickName }}</text>
							<view class="wxfont person-wx-nikename-icon" :class="{ 'nv': v.gender == '0' }"
								v-if="v.gender == '0'">
							</view>
							<view class="wxfont person-wx-nikename-icon" :class="{ 'nan': v.gender == '1' }"
								v-if="v.gender == '1'"></view>
						</view>
						<text class="person-wx-name">
							相距{{ v.distance }}{{ v.distanceUnit }}
						</text>
					</view>
					<view class="person-wx-intor" v-if="v.intro">{{ v.intro }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue'

const list = ref([])
onLoad(() => {
	uni.showModal({
		title: '提示',
		cancelText: '返回',
		content: '查看附近的人将获取你的位置信息，你的位置信息会被保留一段时间，通过右上角的清除功能可随时手动清除位置信息',
		success: (res) => {
			if (res.confirm) {
				getlist()
			} else if (res.cancel) {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	});
})

function getlist() {
	uni.showLoading({
		title: '获取地理位置中'
	})
	uni.getLocation({
		type: 'wgs84',
		success: (resLocation) => {
			uni.hideLoading()
			const latitude = resLocation.latitude
			const longitude = resLocation.longitude
		},
		fail: (error) => {
			uni.showToast({
				title: '请检查定位是否开启',
				icon: 'none',
				position: 'bottom'
			})
			console.log(error.errMsg)
		}
	});
}
function goAddfriend(e) {
	uni.navigateTo({
		url: '../personInfo/detail?param=' + e.userId + '&source=8'
	})
}
function onNavigationBarButtonTap(e) {

}
</script>

<style lang="scss" scoped>
.person-wx-user {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
	width: 100%;
}

.wxnearby {}

.wxnearby-item {
	padding: 0 24rpx;
	width: 100%;
	box-sizing: border-box;
}

.person-wx-avatar {
	width: 90rpx;
	min-width: 90rpx;
	height: 90rpx;
	margin-right: 42rpx;
	border-radius: 16rpx;
}

.wxnearby-item-content {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1px #eee solid;
}

.person-wx-user-detail {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 400rpx;
}

.person-wx-nikename {
	color: #333;
	font-size: 36rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 12rpx;
}

.person-wx-nikename .text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 480rpx;
}

.person-wx-name {
	color: #B2B2B2;
	font-size: 28rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.person-wx-nikename-icon.nan {
	color: #007AFF;
}

.person-wx-nikename-icon.nv {
	color: #FF5A5F;
}

.person-wx-nikename-icon {
	margin-right: auto;
}

.person-wx-intor {
	padding: 12rpx;
	margin-left: auto;
	font-size: 24rpx;
	background-color: #F2F2F2;
	color: #666;
	border-radius: 6rpx;
}
</style>
